<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>维修预约详情</title>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
		<link rel="stylesheet" href="../css/yyxxCLZ.css" />
		<style>
			body {
				background: #f0f0f0;
			}

			.header {
				background: white;
				padding: 12px 15px;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}

			.status-badge {
				background: #4CAF50;
				color: white;
				padding: 3px 15px;
				border-radius: 12px;
				font-size: 12px;
			}

			.info-section {
				background: white;
				margin: 15px;
				border-radius: 8px;
				padding: 15px;
			}

			.date-orange {
				color: #FF9800;
			}

			.img-placeholder {
				background: #eee;
				width: 100%;
				height: 100px;
				border-radius: 6px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #999;
			}

			.nav-bottom {
				position: fixed;
				bottom: 0;
				width: 100%;
				background: white;
				padding: 10px 0;
				box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
			}

			.nav-item {
				text-align: center;
			}

			.nav-active {
				color: #2196F3 !important;
			}

			.upload-btn {
				position: absolute;
				right: 15px;
				bottom: 70px;
				padding: 8px 20px;
				border-radius: 18px;
			}

			.custom-header a {
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<!-- 顶部导航 -->
		<div class="header d-flex align-items-center justify-content-between">
			<a href="ChuLiZhong.html"><i class="fas fa-chevron-left fs-5"></i></a>
			<h6 class="mb-0 fw-bold">预约信息</h6>
			<div>
				<i class="fas fa-ellipsis-vertical ms-2"></i>
			</div>
		</div>
		<input type="hidden" id="wid" />
		<input type="hidden" id="uid" />
		<!-- 主体内容 -->
		<div class="container">
			<!-- 维修单号 -->
			<div class="d-flex justify-content-between align-items-center mx-3 mt-3">
				<div class="d-flex align-items-center">
					<span class="me-2">维修单号：<span id="woNumber"></span></span>
					<i class="far fa-copy text-muted"></i>
				</div>
				<span class="status-badge">处理</span>
			</div>

			<!-- 信息区块 -->
			<div class="info-section">
				<input type="hidden" id="uid" />
				<input type="hidden" id="wid" />
				<div class="mb-3">
					<div class="text-secondary small">故障位置:</div>
					<div id="faultLocationDetail"></div>
				</div>
				<div class="mb-3">
					<div class="text-secondary small">维修日期:</div>
					<div class="date-orange" id="repairDateDetail"></div>
				</div>
				<div class="mb-3">
					<div class="text-secondary small">联系人:</div>
					<div id="contactNameDetail"></div>
				</div>
				<div class="mb-3">
					<div class="text-secondary small">联系电话:</div>
					<div id="contactPhoneDetail"></div>
				</div>
				<div class="mb-3">
					<div class="text-secondary small">故障描述:</div>
					<div id="faultReasonDetail">门锁坏了无法关上</div>
				</div>
				<div class="info-item">
					<span>故障图片:</span>
					<div class="d-flex gap-2">
						<div class="bg-gray-200" style="width: 80px; height: 60px;">
							<!-- 使用 img 标签显示图片 -->
							<img id="faultImage1" src="" alt="故障图片1"
								style="width: 100%; height: 100%; object-fit: cover;">
						</div>
						<div class="bg-gray-200" style="width: 80px; height: 60px;">
							<!-- 使用 img 标签显示图片 -->
							<img id="faultImage2" src="" alt="故障图片2"
								style="width: 100%; height: 100%; object-fit: cover;">
						</div>
					</div>
				</div>
			</div>

			<!-- 上传费用按钮 -->
			<button class="btn btn-primary upload-btn" id="assignButton">上传费用</button>
		</div>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
			aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title" id="myModalLabel">上传</h4>
					</div>
					<div class="modal-body">
						<table class="fee-table">
							<colgroup>
								<col width="20%"> <!-- 材料编号 -->
								<col width="20%"> <!-- 材料名称 -->
								<col width="15%"> <!-- 材料单位 -->
								<col width="15%"> <!-- 项目服务单价 -->
								<col width="10%"> <!-- 数量 -->
								<col width="20%"> <!-- 费用合计 -->
							</colgroup>
							<thead>
								<tr>
									<th style="font-size: 16px;">编号</th>
									<th style="font-size: 14px;">名称</th>
									<th style="font-size: 14px;">单位</th>
									<th style="font-size: 14px;">单价（元）</th>
									<th style="font-size: 14px;">数量</th>
									<th style="font-size: 14px;">合计</th>
								</tr>
							</thead>
							<tbody id="_tbody">
								<!-- 动态内容 -->
							</tbody>
							<tfoot>
								<tr>
									<td colspan="6" class="total-section">
										总计：<span id="totalCount">0</span>项
										<span style="margin-left:24px">金额总计：</span>
										￥<span id="totalAmount">0.00</span>
									</td>
								</tr>
								<tr>
									<td colspan="6" class="action-bar">
										<button class="action-btn btn-submit" id="btn-close">关闭</button>
										<button class="action-btn btn-submit" id="btn-submit">提交修改</button>
									</td>
								</tr>
							</tfoot>
						</table>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
		<!-- 底部导航 -->
		<div class="nav-bottom">
			<div class="row">
				<div class="col-4 nav-item">
					<i class="fas fa-home fs-5 text-secondary"></i>
				</div>
				<div class="col-4 nav-item">
					<i class="fas fa-tools fs-5 nav-active"></i>
				</div>
				<div class="col-4 nav-item">
					<i class="fas fa-user fs-5 text-secondary"></i>
				</div>
			</div>
		</div>

		<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
		<script src="js/jquery.js"></script>
		<script src="../js/request/base.js"></script>
		<script src="js/script/YYXXCLZ.js"></script>

	</body>
</html>